<template>
  <z-form-item
    :label-col="{ style: { width: '100px', paddingRight: '6px' } }"
    :label="basicForm?.headText || '下拉框'"
    class="z-form-item"
    :name="basicForm.field"
  >
    <z-select
      v-model:value="model[basicForm.field]"
      :placeholder="basicForm?.placeHolder"
      :options="addOption"
      :mode="basicForm?.isMulCho == '1' ? 'multiple' : 'combobox'"
      @change="selectChange"
    />
  </z-form-item>
</template>
<script>
import { defineComponent, toRef, ref, onMounted, watch, computed } from 'vue'
import formInfo from '../../../api/renderForm/index'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'SelectItem',
  props: {
    basicProperty: {
      type: Object,
      default: undefined
    },
    formModel: {
      type: Object,
      default: undefined
    },
    formList: {
      type: Array,
      default: undefined
    }
  },
  setup(props) {
    const store = useStore()

    const basicForm = toRef(props, 'basicProperty')
    const formList = toRef(props, 'formList')
    const model = computed(() => props.formModel ? props.formModel : {})

    // 下拉框数据数组
    let addOption = ref([])

    // 获取下拉框数据
    const getDataArr = () => {
      if (basicForm.value.optionType === '1') {
        addOption.value = basicForm.value.addOption
      } else {
        addOption.value = []
        if (basicForm.value.url) {
          formInfo.getRemoteData(basicForm.value.url).then((res) => {
            addOption.value = res.data.map((item) => {
              return {
                label: item[basicForm.value.label],
                value: item[basicForm.value.remoteValue],
                disabled: false,
                ...item
              }
            })
          })
        }
      }
    }

    // 监听远端数据 or 静态数据
    watch(
      () => basicForm.value.optionType,
      (count, prevCount) => {
        getDataArr()
      }
    )

    onMounted(() => {
      getDataArr()
    })

    // 监听当前选择组件对象数据  赋值操作
    watch(
      () => store.getters.currentVal,
      (val) => {
        let arr = store.getters.relaFieldsArr
        arr.forEach((item) => {
          if (item.assoField === basicForm.value.field) {
            model.value[basicForm.value.field] = '' || []
            formInfo.getRemoteData(item.url + store.getters.currentVal.map(i => {
              return i[item.linkField]
            })).then((res) => {
              if (res.code === 1) {
                addOption.value = res.data.map(item1 => {
                  return {
                    label: item1[item['showField']],
                    value: item1[item['replaceField']],
                    disabled: false,
                    ...item1
                  }
                })
              } else {
                addOption.value = []
                model.value[basicForm.value.field] = '' || []
              }
            }).catch(() => {
              addOption.value = []
              model.value[basicForm.value.field] = '' || []
            })
          }
        })
      }
    )

    // 下拉框切换事件
    const selectChange = (val, option) => {
      // 单选or多选
      if (basicForm.value.isMulCho === '0') {
        store.commit('formMake/UPDATE_CURRENTVAL', [option])
      } else {
        store.commit('formMake/UPDATE_CURRENTVAL', option)
      }
      store.commit('formMake/UPDATE_CURRENTFIELD', basicForm.value.field)
      formList.value.forEach(item => {
        if (basicForm.value.field === item.field) {
          store.commit('formMake/UPDATE_ISCHANGEVAL', true)
          store.commit('formMake/UPDATE_CURRENTOBJ', item)
          store.commit('formMake/UPDATE_RELAFIELDSARR', item.relaFields)
        }
      })
    }

    return {
      basicForm,
      model,
      selectChange,
      addOption
    }
  }
})
</script>
<style lang="less" scoped>
.z-form-item {
  flex: 1;
}
</style>
